<template>
    <cBreadcrumb></cBreadcrumb>
    <div class="mainBg">
        <div class="main">
            <base-info v-if="allInfo?.productDetail?.payModeList" :info="allInfo" @change="getGoodArticle"></base-info>
            <div class="goodArticle">
                <div class="sideBar">
                    <div class="sellerInfo">
                        <div class="title">供应商信息</div>
                        <div class="avatar"><img src="@/assets/img/company@2x.png" /></div>
                        <div class="sellerName">{{allInfo.seller.name}}</div>
                        <el-divider></el-divider>
                        <div class="info">
                            <!-- <div class="item">
                                <div class="name">国家/地区</div>
                                <div>中国天津</div>
                            </div> -->
                            <div class="item">
                                <div class="name">联系人</div>
                                <div>{{allInfo.seller.legal}}</div>
                            </div>
                            <div class="item">
                                <div class="name">联系电话</div>
                                <div>{{allInfo.seller.mobile}}</div>
                            </div>
                            <div class="item">
                                <div class="name">邮箱</div>
                                <div>{{allInfo.seller.email}}</div>
                            </div>
                        </div>
                        <!-- <div class="actions">
                            <el-button type="primary" class="btn_gradient">我要咨询</el-button>
                            <el-button type="primary" plain>全部商品</el-button>
                        </div> -->
                    </div>
                    <div class="recommendBlock">
                        <div class="title">
                            <div class="icon"><img src="@/assets/img/title_recommend@2x.png" alt=""></div>
                            <div>推荐车辆</div>
                        </div>
                        <good-item :showButton="false" :goodList="recommendList" arrangement="vertical"></good-item>
                    </div>
                </div>
                <div class="article">
                    <div class="title">商品信息</div>
                    <div class="content" v-html="allInfo.productDetail.introduce">

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, computed, onMounted, getCurrentInstance, watchEffect } from "vue";
import goodItem from "../Home/components/goodItem.vue";
import baseInfo from "./components/baseInfo.vue";

const $router = useRouter();
const $route = useRoute()
const { proxy } = getCurrentInstance();

onMounted(() => {

    // getGoodArticle()
    getGoodList()
});
const loading = ref(false)
const allInfo = ref({
    product: {},
    seller: {},
    productDetail: {
        prodcutPicList: {
            slideshowUrls: []
        }
    }
})
const recommendList = ref([])
const id = ref('')
watchEffect(() => {
    // 接收路由参数
    if ($route.query.id == null || $route.query.id == "" || $route.query.id == undefined) {
        return
    }
    id.value = $route.query.id
    // 加载数据
    proxy.$get({
        url: "/product/listing/getById",
        params: {
            id: id.value
        }
    }).then((res) => {
        window.scrollTo(0, 0)
        allInfo.value = res
        loading.value = false;
    }, () => {
        loading.value = false;
    });


    // }
})

const getGoodList = () => {
    proxy.$get({
        url: "/product/listing/products/topThree",
    }).then((res) => {
        recommendList.value = res
    }, () => {
    });
}
</script>

<style lang="less" scoped>
.mainBg {
    width: 100%;
    background: #fff;
    .main {
        padding-top: 50px;
        width: 1200px;
        margin: 0 auto;
        .goodArticle {
            display: flex;
            .recommendBlock {
                .title {
                    display: flex;
                    font-size: 22px;
                    color: #26282a;
                    line-height: 30px;
                    align-items: center;
                    margin-bottom: 20px;
                    .icon {
                        width: 26px;
                        height: 26px;
                        line-height: 0;
                        margin-right: 10px;
                    }
                }
            }
            .article {
                width: 934px;
                min-height: 1541px;
                border-radius: 3px;
                border: 1px solid #e9e9e9;
                margin-bottom: 10px;
                .title {
                    line-height: 22px;
                    background: #fafafa;
                    padding: 12px 20px;
                    font-size: 14px;
                    font-weight: 500;
                    color: #202020;
                }
                .content {
                    padding: 20px;
                }
            }
            .sideBar {
                .sellerInfo {
                    width: 260px;
                    // height: 398px;
                    background: #ffffff;
                    border-radius: 3px;
                    border: 1px solid #e9e9e9;
                    margin-bottom: 40px;
                    margin-right: 20px;
                    .title {
                        line-height: 22px;
                        background: #fafafa;
                        padding: 12px 20px;
                        font-size: 14px;
                        font-weight: 500;
                        color: #202020;
                    }
                    .avatar {
                        width: 55px;
                        height: 55px;
                        line-height: 0;
                        margin: 20px auto 14px;
                    }
                    .sellerName {
                        text-align: center;
                        font-size: 16px;
                        color: #202020;
                        line-height: 22px;
                    }
                    .info {
                        padding: 0 20px;
                        .item {
                            display: flex;
                            font-size: 14px;
                            color: #202020;
                            line-height: 20px;
                            margin-bottom: 15px;
                            .name {
                                color: #8d9297;
                                // width: 70px;
                                margin-right: 20px;
                            }
                        }
                    }
                    .actions {
                        text-align: center;
                    }
                }
            }
        }
    }
}
</style>